<template>
    <div class="Profile">
        <top-nav :title="title">
            <!-- <template v-slot:right>
                <span class="index-icon iconfont icon-zhuye"></span>
            </template> -->
        </top-nav>
        <div v-show="isShow" class="content">
            <!-- 用户基本信息 -->
            <div class="account">
                <div class="thumb">
                    <user-head-img 
                    :userId="userInfo.userId" 
                    :userImg="userInfo.headImg"
                    :height="userInfo.headImgHeight"
                    :width="userInfo.headImgWidth"
                    ></user-head-img>
                </div>
                <div class="content">
                    <div class="box user-name">{{userInfo.name}}</div>
                    <div 
                    class="box user-signature"
                    :class="userInfo.signature ? '' : 'user-signature-empty'"
                    >
                        {{userInfo.signature || '请点击"账号信息",设置签名/昵称/头像'}}
                    </div>
                </div>
            </div>
            <!-- 数据统计 -->
            <div class="statistics">
                <div class="price-top">
                    <a @click="clickMyPrice" class="price-top-div">
                        <div id="balance-price">{{userInfo.fund}}元</div>
                        <div>我的资金</div>
                    </a>
                    <a @click="clickMyIntergral" id="user-integral" class="price-top-div">
                        <div id="my-integral">{{userInfo.integral}}分</div>
                        <div>我的积分</div>
                    </a>
                    <a @click="clickMyContribution" class="price-top-div">
                        <div id="my-contribution">{{userInfo.contribution}}分</div>
                        <div>我的贡献分</div>
                    </a>
                </div>
                <div class="price-bottom">
                    <a @click="clickMyFollow" class="price-bottom-a">
                        <div id="my-attion">{{userInfo.followCount}}</div>
                        <div class="price-bottom-text">我的关注</div>
                    </a>
                    <a @click="clickMyCollect" class="price-bottom-a">
                        <div id="my-collet">{{userInfo.collectCount}}</div>
                        <div class="price-bottom-text">我的收藏</div>
                    </a>
                </div>
            </div>
            <!-- 功能 -->
            <div class="memu-list">
                <van-row class="list" gutter="4">
                    <van-col @click="clickUserAcc('')" span="6">
                        <a class="btn">
                            <img class="btn-img" :src="img.setBlueIcon">
                            <span class="btn-text">账号信息</span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickUserAcc('safty')" class="btn">
                            <img class="btn-img" :src="img.accountSecurityIcon">
                            <span class="btn-text">关键设置 <span v-show="isShowUserDanger" class="user-danger-icon">!</span></span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickUserAcc('business')" class="btn">
                            <img class="btn-img" :src="img.businessBlueIcon">
                            <span class="btn-text">业务名片</span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickService" class="btn">
                            <img class="btn-img" :src="img.customerServiceIcon">
                            <span class="btn-text">我的客服</span>
                        </a>
                    </van-col>
                </van-row>
                <van-row class="list-2 list" gutter="4">
                    <van-col span="6">
                        <a @click="clickMyAs" class="btn">
                            <img class="btn-img" :src="img.userAssociationIcon">
                            <span class="btn-text">我的社群</span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickMyWorkshop" class="btn">
                            <img class="btn-img" :src="img.userRecordIcon">
                            <span class="btn-text">我的主讲</span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickMyWechat" class="btn">
                            <img class="btn-img" :src="img.userWechatGroupIcon">
                            <span class="btn-text">我的微信群</span>
                        </a>
                    </van-col>
                    <van-col span="6">
                        <a @click="clickIntegral" class="btn">
                            <img class="btn-img" :src="img.menuIntegralListDefaultIcon">
                            <span class="btn-text">积分榜</span>
                        </a>
                    </van-col>
                </van-row>
            </div>
            <div class="user-info-explian">●点击用户头像即可进入用户个人主页</div>
            <menu-list-home @showOverlay="showOverlay" :site="'Profile'"></menu-list-home>
        </div>
        
		<page-empty ref="pageEmpty" @request="requestData" />
    </div>
</template>

<script>
// 自定义组件
import TopNav from "_components/project/common/TopNav"
import UserHeadImg from '_components/project/common/UserHeadImg'
import MenuListHome from "_components/project/common/MenuListHome"
import PageEmpty from "_components/project/common/PageEmpty"

// 自定义方法
import { getProImg } from "_projectFn/images"
import { checkDataEqualVal } from "_commonFn/check"
import { defaultShare } from "_commonFn/share"
import { numberFloor } from "_commonFn/number"
import { getUserInfo, getUserAmount, checkSecurity } from "_network/request"
import { isLoginChose } from "_projectFn/login" 
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { enterPriceDetail, enterUserIntegral, enterContributionDetail, enterUserFollow, enterUserCollect,
enterInstral, enterUserWechatList, enterUserWrokshopList, enterUserAsList, enterUserAccSet, showService } from "_projectFn/page"

// 字体
import '_assets/fonts/iconfont.css'

// 本地图片 
import writeIconBlue from "_assets/img/write-icon-blue.svg"
import setBlue from "_assets/img/user-set-blue-icon.svg"
import accountSecurity from "_assets/img/accountSecurity.svg"
import businessBlue from "_assets/img/user-info-business-blue-icon.svg"
import customerService from "_assets/img/customer-service.svg"
import userAssociation from "_assets/img/user-association.svg"
import userRecord from "_assets/img/user-record-icon.svg"
import userWechatGroup from "_assets/img/user-wechat-group-icon.svg"
import menuIntegralListDefault from "_assets/img/menu-integral-list-default-icon.svg"

// UI组件
import { Col, Row } from 'vant'

// Vue
import Vue from 'vue'
Vue.use(Col).use(Row)

export default {
    name: 'Profile',
    data() {
        return {
            title: '',
            isShow: false,
            isShowUserDanger: false,
            userInfo: {
                userId: null,
                headImg: null,
                headImgHeight: 60,
                headImgWidth: 60,
                signature: null,
                fund: null, // 资金
                integral: null, // 积分
                contribution: null, // 贡献分
                followCount: null, // 关注数量
                collectCount: null, // 收藏数量
                name: null,
            },
            img: {
                writeBlueIcon: getProImg("write-icon-blue.svg", writeIconBlue),
                setBlueIcon: getProImg("user-set-blue-icon.svg", setBlue),
                accountSecurityIcon: getProImg("accountSecurity.svg", accountSecurity),
                businessBlueIcon: getProImg("_assets/img/user-info-business-blue-icon.svg", businessBlue),
                customerServiceIcon: getProImg("_assets/img/customer-service.svg", customerService),
                userAssociationIcon: getProImg("_assets/img/user-association.svg", userAssociation),
                userRecordIcon: getProImg("_assets/img/user-record-icon.svg", userRecord),
                userWechatGroupIcon: getProImg("_assets/img/user-wechat-group-icon.svg", userWechatGroup),
                menuIntegralListDefaultIcon: getProImg("_assets/img/menu-integral-list-default-icon.svg", menuIntegralListDefault),
            },
            dataGeted: 0,
        }
    },
    methods: {
        // 点击进入我的资金明细
        clickMyPrice() {
            enterPriceDetail()
        },
        // 点击进入我的积分
        clickMyIntergral() {
            enterUserIntegral()
        },
        // 点击进入我的贡献分
        clickMyContribution () {
            enterContributionDetail()
        },
        // 点击进入我的关注页面
        clickMyFollow() {
            enterUserFollow()
        },
        // 点击进入我的收藏页面
        clickMyCollect() {
            enterUserCollect()
        },
        // 点击进入账号信息、关键设置、业务名片页面
        clickUserAcc(option) {
            enterUserAccSet(option)
        },
        // 点击显示客服
        clickService() {
            showService()
        },
        // 点击进入我的社群
        clickMyAs() {
            enterUserAsList()
        },
        // 点击进入我的主讲
        clickMyWorkshop() {
            enterUserWrokshopList()
        },
        // 点击进入我的微信群
        clickMyWechat() {
            enterUserWechatList()
        },
        // 点击进入主讲
        clickIntegral() {
            enterInstral()
        },
		showOverlay() {
			this.overlayShow = true
        },
        showEmpty() {
            this.isShow = false
            this.$refs.pageEmpty.show()
        },
        requestData() {
            this.getData()
        },
        getData() {
            if (isLoginChose()) {
                loadingVantToa({})
                Promise.all([getUserInfo(), getUserAmount()])
                .then(res => {
                    const userInfoRes = res[0]
                    const userAmountRes = res[1]
                    console.log("获取用户信息 res：", res)
                    if (res && userInfoRes.errcode == 0 && userAmountRes.errcode == 1000) {
                        this.setUserInfo({
                            ...userInfoRes.data,
                            ...userAmountRes.data
                        })
                        clearVantToa()
                    } else {
                        failTextVantToa("服务器正在修整，请稍后")
                        this.showEmpty()
                    }
                }, res => {
                    console.log("fail: res", res)
                    if (res.errcode != 2000) {
                        failTextVantToa("服务器正在修整，请稍后")
                    }
                })
                .catch(res => {
                    console.log("catch：res", res)
                    failTextVantToa("服务器正在修整，请稍后")
                })
                checkSecurity((data) => {
                    // console.log('data', data)
                    if (data == 0) {
                        this.isShowUserDanger = true
                    }
                })
            }
        },
        // 设置用户信息
        setUserInfo(data) {
            // console.log('data', data)
            this.title = data.NickName
            this.userInfo.userId = data.UserId
            this.userInfo.headImg = data.HeadImg
            this.userInfo.name = data.NickName
            this.userInfo.signature = data.Signature
            this.userInfo.fund = numberFloor(data.TotalAmount)
            this.userInfo.integral = data.Integral
            this.userInfo.contribution = data.TotalOffer
            this.userInfo.followCount = data.FunsCount
            this.userInfo.collectCount = data.CollectCount
            this.isShow = true
        }
    },
    activated() {
        const that = this
        if (that.$store.getters.isWechatBro) {
			checkDataEqualVal({
				data: that.$store.getters,
				key: 'getWechatStatus',
				val: ['success', 'fail'],
				callback(val) {
					if (val === 'success') {
                        defaultShare({
                            title: `工业品业务互助社群平台`,
                            rotes: `区域群/行业群/产品群/企业群/展会群,同城同客群不同产品线业务互补互助！`
                        })
                    }
				}
			})
        }
        this.isShow = false
        this.getData()
    },
    components: {
        TopNav,
        UserHeadImg,
        MenuListHome,
        PageEmpty,
    }
}
</script>

<style lang="scss" scoped>
.Profile {
    width: 100%;
    height: 100%;
    background: #f5f5f5;

    &>div {
        background: white;
    }

    .index-icon {
        font-size: 18px;
    }

    .account {
        padding: 10px;
        display: flex;
        align-items: center;

        .thumb {
            flex-shrink: 0;
        }

        .content {
            width: 100%;
            margin-left: 15px;

            .box {
                line-height: 20px;
            }

            .user-name {
                font-weight: bold;
            }

            .user-signature {
                color: #999999;
            }

            .user-signature-empty {
                color: #999999;
                font-size: 12px;
            }
        }
    }

    .statistics {
        background: #007bbf;
        .price-top {
            height: 70px;
            color: white;
            text-align: center;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;

            a {
                height: 100%;
                color: white;
                width: 33.3333%;
                position: relative;

                &:not(:last-child):after {
                    content: '';
                    position: absolute;
                    right: -1px;
                    height: 20px;
                    top: 25px;
                    width: 1px;
                    background: white;
                }

                div {
                    height: 50%;
                    width: 100%;

                    &:first-child {
                        text-align: center;
                        line-height: 50px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        box-orient: vertical;
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }

        .price-bottom {
            height: 58px;
            color: white;
            text-align: center;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;

            .price-bottom-a {
                height: 100%;
                color: white;
                width: 33.3333%;
                position: relative;
                display: -webkit-flex;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    }

    .memu-list {
        padding: 15px;
        background: #f5f5f5;

        .list {
            border-radius: 8px;
            background: white;
            padding: 15px 5px;

            .btn {
                display: flex;
                flex-direction: column;
                height: 45px;
                width: 77px;
                text-align: center;
                align-items: center;
                color: #333333;
                
                .btn-img {
                    width: 25px;
                    height: 25px;
                }

                .btn-text {
                    width: 100%;
                    height: 20px;

                    .user-danger-icon {
                        font-weight: bold;
                        color: red;
                    }
                }
            }
        }

        .list-2 {
            margin-top: 20px;
        }
    }

    .user-info-explian {
        font-size: 12px;
        height: 50px;
        background: #f5f5f5;
        padding: 0 15px;
        display: flex;
        align-items: center;
    }
}
</style>